﻿<html lang="en">
<head>
    <meta charset="utf-8">
    <title>emlog</title>
    <style type="text/css">
        * {
            margin: 0;  /*居中*/
            text-decoration: none;  /*无下划线*/
        
        }

        .header {
            width: 100%;
            height: 50px;
            background: #303036;  /*头部颜色*/
            top:0;  /*置顶顶部*/
            position: fixed        /*填满顶部*/
           
        }

       .header .logo {
            float: left;
            margin: 14px ;/*zuo边字体头部居中 */
            font-family: "楷体";
           
        }                      

        .header .right {
            float: right;/*头部首页等居右*/
        }   

       .header ul  {
            list-style: none;/*无符号*/
        }

        .header ul li {
            float: left; 
            padding:0 15px;/*首页 模板等之间的空白填充*/
            line-height: 50px;/*首页模板等水平居中*/
             
        }

        .box {
            width: 100%;
            height: 300px; 
            background-color:rgb(254, 254, 255);
            margin-top: 0px; /*logo盒子与头部连接*/
            font-family: "Terminal";   
        }
        

        .box .center{
            padding-top: 110px;/*hi emlog距头部距离*/
            text-align: center;/*emlog永远居中*/
        }


        .mnb{
            width: 100%;
            height: 200px; 
            background-color:rgb(254, 254, 255);
            margin-top: 0px; /*logo盒子与头部连接*/
            font-family: "仿宋";
            padding-top: 5px;/*hi emlog与"基于..."的距离*/
            text-align: center;/*emlog永远居中*/
        }

        .button{
            width:center;/*按钮居中*/
            margin-top: 10px; /*按钮与"基于..."的距离*/
            font-family: "微软雅黑";
          
        }



        .button.qwer{
            width: 100px;/*边框长度*/
            height: 40px;/*边框高度*/
            color:rgb(234, 236, 238);/*字体颜色*/
            background-color: rgb(19, 115, 206);/*边框颜色*/
            text-align: center;
            border-radius: 5px; /*按钮边角半圆大小*/

        }

       
        .asd{
            font-family: "黑体";
            width: 80px;
            height: 40px;
            color:rgb(252, 252, 252);/*字体颜色*/
            background-color: rgb(71, 78, 85);/*边框颜色*/
            text-align: center;
            border-radius: 5px; /*按钮边角半圆大小*/
        }
        .tyu {
            width: 100%;
            height: 200px; 
            background-color:rgb(241, 241, 241);
            margin-top: 80px; /*logo盒子与头部连接*/
            padding-top: 80px;/**/
            font-family: "宋体";
        }
        .tyu.left{
            padding-top: 110px;/*hi emlog距顶部距离*/
            text-align: left;/*居zuo*/
        }
        .jkl{
            width: center;
            height: 100px; 
            background-color:rgb(241, 241, 241);
            margin-top: 0px; /*logo盒子与头部连接*/
            font-family: "仿宋";
            padding-top: 5px;/*hi emlog与"基于..."的距离*/
            text-align: center;/*emlog永远居中*/
        }

        .the {
            width: 100%;
            height: 100px; 
            background-color:rgb(254, 254, 255);
            margin-top: 50px; /*logo盒子与头部连接*/
            padding-top: 50px;/**/
            font-family: "宋体";
        }
        .the.shy{
            padding-top: 80px;/*hi emlog距顶部距离*/
            text-align: left;/*居zuo*/
        }
        .rookie{
            width: center;
            height: 100px; 
            background-color:rgb(254, 254, 255);
            margin-top: 0px; /*盒子与头部连接*/
            font-family: "新宋体";
            padding-top: 5px;/*距离*/
            text-align: center;/*永远居中*/
        }
      
        .ig {
            width: 100%;
            height: 200px; 
            background-color:rgb(241, 241, 241);
            margin-top: 80px; /*logo盒子与头部连接*/
            padding-top: 80px;/**/
            font-family: "宋体";
        }
        .ig.baolan{
            padding-top: 110px;/*hi emlog距顶部距离*/
            text-align: left;/*居zuo*/
        }
        .fpx{
            width: center;
            height: 100px; 
            background-color:rgb(241, 241, 241);
            margin-top: 0px; /*盒子与头部连接*/
            font-family: "新宋体";
            padding-top: 5px;/*距离*/
            text-align: center;/*永远居中*/
        }
      .father{
            background: #bebecc; 
            border: 1px solid;
            padding:5px;
      }
      .body{
          margin: 0px;
          padding: 0px;
      }

      #wrapper{
          width:px;
          margin: 0px auto;
      }

      #main{
          width: 100%;
          height: 200px;
          background: whitesmoke;
          position: relative;
      }

      .father div{
          padding: 10px;
          margin: 15px;
          background-color: rgb(240, 239, 239);
      }

       .son.lu{
           width: 100px;
           height: 100px;
           float: left;
       }
       .son.guan{
           width: 100px;
           height: 100px;
           float: left;
       }

       .son.yu{
           width: 100px;
           height: 100px;
           float: left;
       
       }
       .son.zh{
           width: 100px;
           height: 100px;
           float: left;
       }
       .foot{
           width: 100%;
           height: 20px;
           background: white;
       }
    </style>
</head>
<body>
    <div class="header">
    <div class="logo">
        <div class="left">
            <a href="#"><h3>EMLOG</h3> </a>
        </div>
    </div>
    <div class="right">
        
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">模板</a></li>
            <li><a href="#">下载</a></li>
            <li><a href="#">插件</a></li>
            
        </ul>
    </div>
</div>
<div class="box">
        <div class="center">
       <h1>Hi, emlog pro</h1></br></br>
       <div class="mnb">
        <h3>基于PHP和MySQL的功能强大的博客及CMS建站系统，追求快速、稳定、简单、舒适的建站体验。</h3>
    <div class="button">
        <button type="button" class="button qwer">下载emlog
        </button>
        <button type="button" class="asd ">Github</button>
    </div>
       </div>
        </div>
</div>
<div class="tyu">
        <div class="left">
            <h2>&nbsp;&nbsp;&nbsp;&nbsp;快速、稳定</h2>
       <div class="jkl">
           <h3>一切操作都应该是快速的，我们无法容忍繁杂的功能设计和龟速的反应，不管你是个人用户还是有大量数据的专业博主，都可以快速和稳定的使用emlog。</h3>
       </div>
       </div>
</div>
<div class="the">
    <div class="shy">
        <h2>&nbsp;&nbsp;&nbsp;&nbsp;自由扩展</h2></div>
   <div class="rookie">
       <h3> 一切操作都应该是快速的，我们无法容忍繁杂的功能设计和龟速的反应，不管你是个人用户还是有大量数据的专业博主，都可以快速和稳定的使用emlog。</h3>
   </div>
   </div>
</div>
<div class="ig">
    <div class="baolan">
        <h2>&nbsp;&nbsp;&nbsp;&nbsp;快速、稳定</h2>
        <div class="fpx">
            <h3>一切操作都应该是快速的，我们无法容忍繁杂的功能设计和龟速的反应，不管你是个人用户还是有大量数据的专业博主，都可以快速和稳定的使用emlog。</h3>
        </div>
    </div>
</div>
 
<div class="lu">
    <p>emlog.net</p>
    <div class="guan">
        
        <h4>扩展</h4> 
        <ul> 
       <li><a href="#">模板</a></li> 
       <li><a href="#">插件</a></li> 
       </ul>

        <div class="yu"> 
            <h4>帮助</h4> 
            <ul> 
            <li><a href="#">安装说明</a> </li> 
                <li><a href="#">常见问题</a> </li> 
                    <li><a href="#">问题反馈</a> </li> 
                        <li><a href="#">讨论</a></li>  </ul>
            <div class="zh">
                 
                <h4>关于</h4> 
                <ul> <li></li><a href="#">Github</a> </li>
                <li></li><a href="#">Licence</a> </li> 
                <li></li><a href="#">Login</a> </li> </ul>
</div>
 
</body>
</html>

